<template>
    <div style="background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);height: 100vh;">
        <!--导航栏-->
        <top-nav></top-nav>

        <div style="margin-top: 50px;" class="position-relative">

            <div class="swiper-box">
                <el-carousel trigger="click" height="450px">
                    <el-carousel-item>
                        <img style="width: 100%;height: 100%;" src="../assets/img/1.png">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;height: 100%;" src="../assets/img/2.jpg">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;height: 100%;" src="../assets/img/3.png">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img style="width: 100%;height: 100%;" src="../assets/img/4.png">
                    </el-carousel-item>
                </el-carousel>
            </div>
			
			
			<div class="weather-info">
				<div class="info-details">
                    	<i :class="`qi-` + locWeatherInfo.icon " class="mr-10 color-f" style="font-size: 50px;"></i>
                    	<p>{{ value[1] }}</p>
                    	<h1>{{ locWeatherInfo.temp }}°</h1>
                    	<p class="color-f font-30">{{  locWeatherInfo.text}}</p>
                	</div>
            	</div>
			</div>
			<div class="buttonBoxs">
                <div class="city-select-box">
                  	<el-cascader
                        v-model="value"
                        :options="options"
                        :props="{ expandTrigger: 'hover' }"
                        @change="handleChange">
                   	</el-cascader>
                </div>
			</div>
            
			
        </div>
    </div>
</template>

<script>
    import TopNav from "../components/TopNav"
    import {get, post} from "../utils/request";

    export default {
        name: "index",
        components: {
            TopNav
        },
        data() {
            return {
                currentId: '',
                value: [],
                locWeatherInfo: '',
                options: [
                    {
                        value: '河北',
                        label: '河北',
                        children:
                            [
                                {value: '石家庄', label: '石家庄'},
                                {value: '保定', label: '保定'},
                                {value: '秦皇岛', label: '秦皇岛'},
                                {value: '唐山', label: '唐山'},
                                {value: '邯郸', label: '邯郸'},
                                {value: '邢台', label: '邢台'},
                                {value: '沧州', label: '沧州'},
                                {value: '承德', label: '承德'},
                                {value: '廊坊', label: '廊坊'},
                                {value: '衡水', label: '衡水'},
                                {value: '张家口', label: '张家口'},
                            ]
                    },
                    {
                        value: '山西',
                        label: '山西',
                        children:
                            [
                                {value: '太原', label: '太原'},
                                {value: '大同', label: '大同'},
                                {value: '阳泉', label: '阳泉'},
                                {value: '长治', label: '长治'},
                                {value: '临汾', label: '临汾'},
                                {value: '晋中', label: '晋中'},
                                {value: '运城', label: '运城'},
                                {value: '晋城', label: '晋城'},
                                {value: '忻州', label: '忻州'},
                                {value: '朔州', label: '朔州'},
                                {value: '吕梁', label: '吕梁'}
                            ]
                    },
                    {
                        value: '内蒙古',
                        label: '内蒙古',
                        children:
                            [
                                {value: '呼和浩特', label: '呼和浩特'},
                                {value: '呼伦贝尔', label: '呼伦贝尔'},
                                {value: '包头', label: '包头'},
                                {value: '赤峰', label: '赤峰'},
                                {value: '乌海', label: '乌海'},
                                {value: '通辽', label: '通辽'},
                                {value: '鄂尔多斯', label: '鄂尔多斯'},
                                {value: '乌兰察布', label: '乌兰察布'},
                                {value: '巴彦淖尔', label: '巴彦淖尔'}
                            ]
                    },
                    {
                        value: '辽宁',
                        label: '辽宁',
                        children:
                            [
                                {value: '盘锦', label: '盘锦'},
                                {value: '鞍山', label: '鞍山'},
                                {value: '抚顺', label: '抚顺'},
                                {value: '本溪', label: '本溪'},
                                {value: '铁岭', label: '铁岭'},
                                {value: '锦州', label: '锦州'},
                                {value: '丹东', label: '丹东'},
                                {value: '辽阳', label: '辽阳'},
                                {value: '葫芦岛', label: '葫芦岛'},
                                {value: '阜新', label: '阜新'},
                                {value: '朝阳', label: '朝阳'},
                                {value: '营口', label: '营口'},
                            ]
                    },
                    {
                        value: '吉林',
                        label: '吉林',
                        children:
                            [
                                {value: '吉林', label: '吉林'},
                                {value: '通化', label: '通化'},
                                {value: '白城', label: '白城'},
                                {value: '四平', label: '四平'},
                                {value: '辽源', label: '辽源'},
                                {value: '松原', label: '松原'},
                                {value: '白山', label: '白山'},
                            ]
                    },
                    {
                        value: '黑龙江',
                        label: '黑龙江',
                        children:
                            [
                                {value: '哈尔滨', label: '哈尔滨'},
                                {value: '伊春', label: '伊春'},
                                {value: '牡丹江', label: '牡丹江'},
                                {value: '大庆', label: '大庆'},
                                {value: '鸡西', label: '鸡西'},
                                {value: '鹤岗', label: '鹤岗'},
                                {value: '绥化', label: '绥化'},
                                {value: '双鸭山', label: '双鸭山'},
                                {value: '七台河', label: '七台河'},
                                {value: '佳木斯', label: '佳木斯'},
                                {value: '黑河', label: '黑河'},
                                {value: '齐齐哈尔', label: '齐齐哈尔'},
                            ]
                    },
                    {
                        value: '山东',
                        label: '山东',
                        children:
                            [
                                {value: '济南', label: '济南'},
                                {value: '青岛', label: '青岛'},
                                {value: '淄博', label: '淄博'},
                                {value: '枣庄', label: '枣庄'},
                                {value: '东营', label: '东营'},
                                {value: '烟台', label: '烟台'},
                                {value: '潍坊', label: '潍坊'},
                                {value: '济宁', label: '济宁'},
                                {value: '泰安', label: '泰安'},
                                {value: '威海', label: '威海'},
                                {value: '日照', label: '日照'},
                                {value: '莱芜', label: '莱芜'},
                                {value: '德州', label: '德州'},
                                {value: '聊城', label: '聊城'},
                                {value: '菏泽', label: '菏泽'},
                                {value: '滨州', label: '滨州'},
                            ]
                    },
                    {
                        value: '江苏',
                        label: '江苏',
                        children:
                            [
                                {value: '南京', label: '南京'},
                                {value: '镇江', label: '镇江'},
                                {value: '常州', label: '常州'},
                                {value: '无锡', label: '无锡'},
                                {value: '苏州', label: '苏州'},
                                {value: '徐州', label: '徐州'},
                                {value: '连云港', label: '连云港'},
                                {value: '淮安', label: '淮安'},
                                {value: '盐城', label: '盐城'},
                                {value: '扬州', label: '扬州'},
                                {value: '泰州', label: '泰州'},
                                {value: '南通', label: '南通'},
                                {value: '宿迁', label: '宿迁'},
                            ]
                    },
                    {
                        value: '安徽',
                        label: '安徽',
                        children:
                            [
                                {value: '合肥', label: '合肥'},
                                {value: '蚌埠', label: '蚌埠'},
                                {value: '芜湖', label: '芜湖'},
                                {value: '淮南', label: '淮南'},
                                {value: '亳州', label: '亳州'},
                                {value: '阜阳', label: '阜阳'},
                                {value: '淮北', label: '淮北'},
                                {value: '宿州', label: '宿州'},
                                {value: '滁州', label: '滁州'},
                                {value: '安庆', label: '安庆'},
                                {value: '巢湖', label: '巢湖'},
                                {value: '马鞍山', label: '马鞍山'},
                                {value: '宣城', label: '宣城'},
                                {value: '黄山', label: '黄山'},
                                {value: '池州', label: '池州'},
                                {value: '铜陵', label: '铜陵'},
                            ]
                    },
                    {
                        value: '浙江',
                        label: '浙江',
                        children:
                            [
                                {value: '杭州', label: '杭州'},
                                {value: '嘉兴', label: '嘉兴'},
                                {value: '湖州', label: '湖州'},
                                {value: '金华', label: '金华'},
                                {value: '温州', label: '温州'},
                                {value: '宁波', label: '宁波'},
                                {value: '丽水', label: '丽水'},
                                {value: '绍兴', label: '绍兴'},
                                {value: '衢州', label: '衢州'},
                                {value: '舟山', label: '舟山'},
                                {value: '台州', label: '台州'},
                            ]
                    },
                    {
                        value: '福建',
                        label: '福建',
                        children:
                            [
                                {value: '福州', label: '福州'},
                                {value: '厦门', label: '厦门'},
                                {value: '泉州', label: '泉州'},
                                {value: '三明', label: '三明'},
                                {value: '南平', label: '南平'},
                                {value: '漳州', label: '漳州'},
                                {value: '莆田', label: '莆田'},
                                {value: '宁德', label: '宁德'},
                                {value: '龙岩', label: '龙岩'},
                                {value: '舟山', label: '舟山'},
                                {value: '台州', label: '台州'},
                            ]
                    },
                    {
                        value: '广东',
                        label: '广东',
                        children:
                            [
                                {value: '广州', label: '广州'},
                                {value: '深圳', label: '深圳'},
                                {value: '汕头', label: '汕头'},
                                {value: '惠州', label: '惠州'},
                                {value: '珠海', label: '珠海'},
                                {value: '揭阳', label: '揭阳'},
                                {value: '佛山', label: '佛山'},
                                {value: '河源', label: '河源'},
                                {value: '阳江', label: '阳江'},
                                {value: '茂名', label: '茂名'},
                                {value: '湛江', label: '湛江'},
                                {value: '梅州', label: '梅州'},
                                {value: '肇庆', label: '肇庆'},
                                {value: '韶关', label: '韶关'},
                                {value: '潮州', label: '潮州'},
                                {value: '东莞', label: '东莞'},
                                {value: '中山', label: '中山'},
                                {value: '清远', label: '清远'},
                                {value: '江门', label: '江门'},
                                {value: '汕尾', label: '汕尾'},
                                {value: '云浮', label: '云浮'},
                            ]
                    },
                    {
                        value: '海南',
                        label: '海南',
                        children:
                            [
                                {value: '海口', label: '海口'},
                                {value: '三亚', label: '三亚'},
                            ]
                    },
                    {
                        value: '云南',
                        label: '云南',
                        children:
                            [
                                {value: '昆明', label: '昆明'},
                                {value: '曲靖', label: '曲靖'},
                                {value: '玉溪', label: '玉溪'},
                                {value: '保山', label: '保山'},
                                {value: '昭通', label: '昭通'},
                                {value: '丽江', label: '丽江'},
                                {value: '普洱', label: '普洱'},
                                {value: '临沧', label: '临沧'},
                            ]
                    },
                    {
                        value: '贵州',
                        label: '贵州',
                        children:
                            [
                                {value: '贵阳', label: '贵阳'},
                                {value: '六盘水', label: '六盘水'},
                                {value: '遵义', label: '遵义'},
                                {value: '安顺', label: '安顺'},
                            ]
                    },
                    {
                        value: '四川',
                        label: '四川',
                        children:
                            [
                                {value: '成都', label: '成都'},
                                {value: '绵阳', label: '绵阳'},
                                {value: '德阳', label: '德阳'},
                                {value: '广元', label: '广元'},
                                {value: '自贡', label: '自贡'},
                                {value: '攀枝花', label: '攀枝花'},
                                {value: '乐山', label: '乐山'},
                                {value: '南充', label: '南充'},
                                {value: '内江', label: '内江'},
                                {value: '遂宁', label: '遂宁'},
                                {value: '广安', label: '广安'},
                                {value: '泸州', label: '泸州'},
                                {value: '达州', label: '达州'},
                                {value: '眉山', label: '眉山'},
                                {value: '宜宾', label: '宜宾'},
                                {value: '雅安', label: '雅安'},
                                {value: '资阳', label: '资阳'},
                            ]
                    },
                    {
                        value: '湖南',
                        label: '湖南',
                        children:
                            [
                                {value: '长沙', label: '长沙'},
                                {value: '株洲', label: '株洲'},
                                {value: '湘潭', label: '湘潭'},
                                {value: '衡阳', label: '衡阳'},
                                {value: '岳阳', label: '岳阳'},
                                {value: '郴州', label: '郴州'},
                                {value: '永州', label: '永州'},
                                {value: '邵阳', label: '邵阳'},
                                {value: '怀化', label: '怀化'},
                                {value: '常德', label: '常德'},
                                {value: '益阳', label: '益阳'},
                                {value: '张家界', label: '张家界'},
                                {value: '娄底', label: '娄底'},
                            ]
                    },
                    {
                        value: '湖北',
                        label: '湖北',
                        children:
                            [
                                {value: '武汉', label: '武汉'},
                                {value: '襄樊', label: '襄樊'},
                                {value: '宜昌', label: '宜昌'},
                                {value: '黄石', label: '黄石'},
                                {value: '鄂州', label: '鄂州'},
                                {value: '随州', label: '随州'},
                                {value: '荆州', label: '荆州'},
                                {value: '荆门', label: '荆门'},
                                {value: '十堰', label: '十堰'},
                                {value: '孝感', label: '孝感'},
                                {value: '黄冈', label: '黄冈'},
                                {value: '咸宁', label: '咸宁'},
                            ]
                    },
                    {
                        value: '河南',
                        label: '河南',
                        children:
                            [
                                {value: '郑州', label: '郑州'},
                                {value: '洛阳', label: '洛阳'},
                                {value: '开封', label: '开封'},
                                {value: '漯河', label: '漯河'},
                                {value: '安阳', label: '安阳'},
                                {value: '新乡', label: '新乡'},
                                {value: '周口', label: '周口'},
                                {value: '三门峡', label: '三门峡'},
                                {value: '焦作', label: '焦作'},
                                {value: '平顶山', label: '平顶山'},
                                {value: '信阳', label: '信阳'},
                                {value: '南阳', label: '南阳'},
                                {value: '鹤壁', label: '鹤壁'},
                                {value: '濮阳', label: '濮阳'},
                                {value: '许昌', label: '许昌'},
                                {value: '商丘', label: '商丘'},
                                {value: '驻马店', label: '驻马店'},
                            ]
                    },
                    {
                        value: '陕西',
                        label: '陕西',
                        children:
                            [
                                {value: '西安', label: '西安'},
                                {value: '咸阳', label: '咸阳'},
                                {value: '铜川', label: '铜川'},
                                {value: '延安', label: '延安'},
                                {value: '宝鸡', label: '宝鸡'},
                                {value: '渭南', label: '渭南'},
                                {value: '汉中', label: '汉中'},
                                {value: '安康', label: '安康'},
                                {value: '商洛', label: '商洛'},
                                {value: '榆林', label: '榆林'},]
                    },
                    {
                        value: '甘肃',
                        label: '甘肃',
                        children:
                            [
                                {value: '兰州', label: '兰州'},
                                {value: '天水', label: '天水'},
                                {value: '平凉', label: '平凉'},
                                {value: '酒泉', label: '酒泉'},
                                {value: '嘉峪关', label: '嘉峪关'},
                                {value: '金昌', label: '金昌'},
                                {value: '白银', label: '白银'},
                                {value: '武威', label: '武威'},
                                {value: '张掖', label: '张掖'},
                                {value: '庆阳', label: '庆阳'},
                                {value: '定西', label: '定西'},
                                {value: '陇南', label: '陇南'},
                            ]
                    },
                    {
                        value: '青海',
                        label: '青海',
                        children:
                            [
                                {value: '西宁', label: '西宁'},
                            ]
                    },
                    {
                        value: '江西',
                        label: '江西',
                        children:
                            [
                                {value: '南昌', label: '南昌'},
                                {value: '九江', label: '九江'},
                                {value: '赣州', label: '赣州'},
                                {value: '吉安', label: '吉安'},
                                {value: '鹰潭', label: '鹰潭'},
                                {value: '上饶', label: '上饶'},
                                {value: '萍乡', label: '萍乡'},
                                {value: '景德镇', label: '景德镇'},
                                {value: '新余', label: '新余'},
                                {value: '宜春', label: '宜春'},
                                {value: '抚州', label: '抚州'},
                            ]
                    },
                    {
                        value: '台湾',
                        label: '台湾',
                        children:
                            [
                                {value: '台北', label: '台北'},
                                {value: '台中', label: '台中'},
                                {value: '基隆', label: '基隆'},
                                {value: '高雄', label: '高雄'},
                                {value: '台南', label: '台南'},
                                {value: '新竹', label: '新竹'},
                                {value: '嘉义', label: '嘉义'},]
                    },
                    {
                        value: '新疆',
                        label: '新疆',
                        children:
                            [
                                {value: '乌鲁木齐', label: '乌鲁木齐'},
                                {value: '克拉玛依', label: '克拉玛依'}
                            ]
                    },
                    {
                        value: '西藏',
                        label: '西藏',
                        children:
                            [
                                {value: '拉萨', label: '拉萨'},
                            ]
                    },
                    {
                        value: '宁夏',
                        label: '宁夏',
                        children:
                            [
                                {value: '银川', label: '银川'},
                                {value: '石嘴山', label: '石嘴山'},
                                {value: '吴忠', label: '吴忠'},
                                {value: '固原', label: '固原'},
                                {value: '中卫', label: '中卫'},
                            ]
                    },
                    {
                        value: '广西',
                        label: '广西',
                        children:
                            [
                                {value: '南宁', label: '南宁'},
                                {value: '柳州', label: '柳州'},
                                {value: '桂林', label: '桂林'},
                                {value: '梧州', label: '梧州'},
                                {value: '北海', label: '北海'},
                                {value: '崇左', label: '崇左'},
                                {value: '来宾', label: '来宾'},
                                {value: '贺州', label: '贺州'},
                                {value: '玉林', label: '玉林'},
                                {value: '百色', label: '百色'},
                                {value: '河池', label: '河池'},
                                {value: '钦州', label: '钦州'},
                                {value: '防城港', label: '防城港'},
                                {value: '贵港', label: '贵港'},
                            ]
                    },
                    {
                        value: '北京',
                        label: '北京',
                        children:
                            [
                                {value: '海淀', label: '海淀'},
                                {value: '朝阳', label: '朝阳'},
                                {value: '昌平', label: '昌平'},
                                {value: '房山', label: '房山'},
                                {value: '通州', label: '通州'},
                                {value: '丰台', label: '丰台'},
                                {value: '大兴', label: '大兴'},
                                {value: '延庆', label: '延庆'},
                                {value: '平谷', label: '平谷'},
                            ]
                    },
                    {
                        value: '上海',
                        label: '上海',
                        children:
                            [
                                {value: '浦东新区', label: '浦东新区'},
                                {value: '松江', label: '松江'},
                                {value: '嘉定', label: '嘉定'},
                                {value: '宝山', label: '宝山'},
                                {value: '青浦', label: '青浦'},
                                {value: '闵行', label: '闵行'},
                                {value: '奉贤', label: '奉贤'},
                                {value: '徐汇', label: '徐汇'},
                                {value: '杨浦', label: '杨浦'},

                            ]
                    },
                    {
                        value: '天津',
                        label: '天津',
                        children:
                            [
                                {value: '南开', label: '南开'},
                                {value: '武清', label: '武清'},
                                {value: '滨海新区', label: '滨海新区'},
                                {value: '宝坻', label: '宝坻'},
                                {value: '蓟州', label: '蓟州'},
                                {value: '津南', label: '津南'},
                                {value: '东丽', label: '东丽'},
                                {value: '红桥', label: '红桥'},
                                {value: '北辰', label: '北辰'},

                            ]
                    },
                    {
                        value: '重庆',
                        label: '重庆',
                        children:
                            [
                                {value: '合川', label: '合川'},
                                {value: '涪陵', label: '涪陵'},
                                {value: '云阳', label: '云阳'},
                                {value: '永川', label: '永川'},
                                {value: '九龙坡', label: '九龙坡'},
                                {value: '江津', label: '江津'},
                                {value: '万州', label: '万州'},
                                {value: '开州', label: '开州'},
                                {value: '渝北', label: '渝北'},
                            ]
                    },
                ]
            };
        },
        mounted() {
            this.cityInit();
            if(this.$route.params.id)
            	this.getParams();
        },
        methods: {
            cityInit(){
                this.value = ["浙江","温州"];
                this.getCityId();
            },
			getCityId() {
                let adm = this.value[0]
                let loc = this.value[1]
                get('https://geoapi.qweather.com/v2/city/lookup?key=9507a65da7254e2a954de1b0c5b446bc&location=' + loc + '&adm=' + adm)
                    .then(res => {
                        console.log(res);
                        if (res.data.code == 200) {
                            localStorage.setItem('cityId',res.data.location[0].id)
                            this.currentId = res.data.location[0].id
                            this.getWeatherInfo()
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            getWeatherInfo() {
                let cityId = this.currentId
                get('https://devapi.qweather.com/v7/weather/now?key=9507a65da7254e2a954de1b0c5b446bc&location=' + cityId)
                    .then(res => {
                        console.log(res);
                        this.locWeatherInfo = res.data.now
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            handleChange(value) {
                console.log(value);
                this.$router.push({
            		name:'Place',
            		params:{
            			id:value
            		}
            	})
            },
            getParams () {  
        		// 取到路由带过来的参数  
        		let routerParams = this.$route.params.id;
        		// 将数据放在当前组件的数据内  
        		this.value = routerParams;
        		console.log("routerParams", this.value); // 输出 test message
        		this.getCityId();
      		},
        }
    }
</script>

<style>
    .weather-info {
        position: absolute;
        top: 0;
        left: 65px;
        height: calc(100% - 60px);
        padding: 30px 0px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .city-select-box {

    }
    .info-details h1 {
        font-size: 100px;
        font-weight: 400;
        color: #E4D090;
    }
    .info-details>p {
        font-size: 33px;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.9;
        margin-bottom: 10px;
    }
    
    .buttonBoxs{
    	display: flex;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    	margin-top: 5px;
    }
</style>